<template>
    <Table border :columns="columns12" :data="data6">
        <template slot-scope="{ row }" slot="name">
            <strong>{{ row.name }}</strong>
        </template>
        <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</Button>
            <Button type="error" size="small" @click="remove(index)">Delete</Button>
        </template>
    </Table>
</template>
<script>
    export default {
        data () {
            return {
                columns12: [
                    {
                        title: 'ID',
                        key: 'ID'
                    },
                    {
                        title: '领取日期',
                        key: 'date'
                    },
                    {
                        title: '任务包',
                        slot: 'name'
                    },
                    {
                        title: '完成度',
                        key: 'age'
                    },
                    {
                        title: '状态',
                        key: 'address'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                data6: [
                    {
                        ID:'1',
                        date: '2016-10-03',
                        name: '一心一意',
                        age: 18,
                        address: 'New York No. 1 Lake Park'

                    },
                    {
                        ID:'2',
                        date: '2016-10-03',
                        name: '一心一意',
                        age: 24,
                        address: 'London No. 1 Lake Park'
                    },
                    {
                        ID:'3',
                        date: '2016-10-03',
                        name: '一心一意',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park'
                    },
                    {
                        ID:'4',
                        date: '2016-10-03',
                        name: '一心一意',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park'
                    }
                ]
            }
        },
        methods: {
            show (index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: `ID:${this.data6[index].ID }<br>Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
                })
            },
            remove (index) {
                this.data6.splice(index, 1);
            }
        }
    }
</script>
